<template>
	<!-- 健康码申领 -->
	<view class="safe-nav-top">
		<u-navbar
			title="健康码申领" 
			fixed autoBack 
		>
		</u-navbar>
		
		<div style="font-size: 36rpx; font-weight: bold;text-align: center;padding: 24rpx;"> 
			健康码申领
		</div>
		
		<!-- 表单区域 -->
		<div class="content">
			<div style="color: #666666;padding: 24rpx 0;">请填报当前健康信息</div>
			
			<div style="background-color: #FFFFFF;padding: 24rpx;">
				<u-form style="padding-left: 24rpx;" :model="form" ref="form" 
					label-width="100%" labelAlign="left" labelPosition="top"
				>
					<u-form-item label="您当前的体温？" prop="temp"  required>
						<u-input v-model="form.temp" placeholder="请输入体温" ><text slot="suffix">℃</text></u-input>
					</u-form-item>
				</u-form>
			</div>
			
			<div class="white-box" style="padding: 36rpx 24rpx;margin-top: 24rpx;">
				<u-checkbox-group @change="onChangeAgreed">
					<u-checkbox checked :name="true" label="本人保证以上信息准确。"></u-checkbox>
				</u-checkbox-group>
			</div>
			
			<!-- 提交按钮 -->
			<u-button
				type="primary" size="large" @click="onSubmit"  :disabled="!agreed"
				:loading="submitLoading" loadingText="正在提交...">
				确定
			</u-button>
		</div>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					temp: 36.7,
				},
				// 表单校验
				rules: {
					name: [
						{ required: true, message: '请输入体温', trigger: ['blur', 'change'] }
					],
				},
				// 同意协议
				agreed: true,
				submitLoading: false,
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			// 同意按钮选项变化
			onChangeAgreed(value){
				this.agreed = value && value.length > 0 ? value[0] : false;
			},
			//点击确定提交
			onSubmit(){
				this.$refs.form.validate().then(res => {
					//校验通过
					this.submitLoading = true;
					
					// 请求接口
					this.$api.healthCode.apply({
						bodyTemp: this.form.temp,
					}).then(res=>{
						this.submitLoading = false;
						uni.navigateBack();
					}).catch(e=>{
						this.submitLoading = false;
					});
				});
			},
		},
	}
</script>

<style scoped>
	.content{
		padding: 24rpx;
	}
</style>
